<template>
  <div class="m-product-categroy">
    <dl class="classic">
      <dt>分类</dt>
      <dt>全部</dt>
      <dd v-for="(item, index) in menuList" :key="index">
        <m-select :title="item.title" :list="item.sub_list" />
      </dd>
    </dl>
    <dl class="classic">
      <dt>区域</dt>
      <dt>全部</dt>
      <dd v-for="(item, index) in areaList" :key="index">
        <m-select :title="item.title" :list="item.sub_list" />
      </dd>
    </dl>
  </div>
</template>

<script>
import MSelect from './select.vue';

export default {
  data() {
    return {
      menuList: [
        {
          title: '美食',
          type: 'food',
          sub_list: [
            {
              name: '日本菜',
              id: 'Japan',
            },
            {
              name: '饮品店',
              id: 'drink',
            },
            {
              name: '面包甜点',
              id: 'cate',
            },
          ],
        },
        {
          title: '酒店住宿',
          type: 'hotal',
          sub_list: [
            {
              name: '温泉酒店',
              id: 'hot_spring',
            },
            {
              name: '经济型酒店',
              id: 'economy',
            },
            {
              name: '高端酒店',
              id: 'high',
            },
          ],
        },
      ],
      areaList: [
        {
          title: '推荐商圈',
          sub_list: [
            {
              name: '望京',
              id: 120000,
            },
            {
              name: '昌平',
              id: 12222,
            },
          ],
        },
      ],
    };
  },
  components: {
    MSelect,
  },
};
</script>

<style lang="scss" scoped>
@import '@/assets/css/products/index.scss';
</style>
